<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<!-- plugins:css -->
<link rel="stylesheet" href="/node_modules/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css">
<!-- endinject -->
<!-- plugin css for this page -->
<link rel="stylesheet" href="/node_modules/jquery-bar-rating/dist/themes/css-stars.css">
<link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" />
<!-- End plugin css for this page -->
<!-- inject:css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endinject -->
<link rel="shortcut icon" href="/images/favicon.png" />

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

	<link rel="stylesheet" href="/css/bootstrap-select.min.css">

	<style>
		.table th,.table td{
			 text-align: center;
		 }

		table td .textImg{
			width: auto;height: 70px;border-radius:0;display: block;margin: 0 auto;
		}

	</style>

</head>
<body>
<div class="container-scroller">

	<!--顶部-->
	<div th:replace="~{commons/commons::top}"></div>

<!-- partial -->
<div class="container-fluid page-body-wrapper">
  <div class="row row-offcanvas row-offcanvas-right" >

	  <!--	  侧边-->
	  <div th:replace="~{commons/commons::cebian}"></div>

	<!-- partial -->
	  <div class="card content-wrapper" >
		  <div class="card-body" style="background-color: white">
<!--			  <h4 class="card-title">song</h4>-->
			  <h4 class="card-title float-left" style="margin: 0 50px 0 0">Song</h4>
			  <button shiro:hasPermission="admin:addUpdate" class="btn btn-primary btn-sm float-left" data-toggle="modal" data-target="#myModal" style="margin: 0 0 20px 0">
				  添加歌曲
			  </button>
			  <div class="table-responsive ps ps--theme_default" data-ps-id="6eeda779-4ea8-09e7-caef-8e1ec24de8ab">
				  <table class="table table-bordered">
					  <thead>
					  <tr>
						  <th>
							  头像
						  </th>
						  <th>
							  歌手名
						  </th>
						  <th>
							  歌名
						  </th>
						  <th>
							  发布时间
						  </th>
						  <th>
							  音频
						  </th>
<!--						  <th >-->
<!--							  修改-->
<!--						  </th>-->
						  <th shiro:hasPermission="admin:delete">
							  删除
						  </th>
					  </tr>
					  </thead>
					  <tbody>
					  <tr th:each="songListMusic:${songListMusicBean}">
						  <td>
							  <img th:src="${songListMusic.singerBean.head_img}"  class="textImg"   alt="">
						  </td>
						  <td>
							  [[${songListMusic.singerBean.name}]]
						  </td>
						  <td>
							  [[${songListMusic.musicBean.song_title}]]
						  </td>
						  <td class="py-1">
							  [[${songListMusic.musicBean.release_time}]]
						  </td>
						  <td>
							  <audio th:src="@{${songListMusic.musicBean.music_path}}" controls="controls" ></audio>
						  </td>
<!--						  <td>-->
<!--							  <button href="videoUpdate.html" class="btn btn-gradient-secondary btn-rounded btn-fw" data-toggle="modal" data-target="#myModal">-->
<!--								  修改-->
<!--							  </button>-->
<!--						  </td>-->
						  <td shiro:hasPermission="admin:delete">
							  <a th:href="@{'/admin/delete/deleteOneId?id='+${songListMusic.id}+'&song_list_id='+${song_list_id}}" type="button" class="btn btn-gradient-warning btn-rounded btn-fw">删除</a>
						  </td>

					  </tr>


					  </tbody>
				  </table>
				  <div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></div>
		  </div>
	  </div>

	<!-- partial -->
  </div>
  <!-- row-offcanvas ends -->
</div>
<!-- page-body-wrapper ends -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">

				<h4 class="modal-title" id="myModalLabel">
					添加歌曲
				</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
			</div>
				<div class="modal-body">
					<form th:action="@{'/admin/insertSongListSinger?song_list_id='+${song_list_id}}" id="defaultForm" class="modal-body" method="post" >

						<div class="form-group" style="margin-bottom: 30px">
							<label for="singer_id">歌手</label>
							<select name="singer_id" class="selectpicker form-control" onchange="selectSong()" id="singer_id" title="请选择" data-size="5" data-live-search =“true” required>
								<div th:each="singerBean:${singerBeanList}">
									<option th:value="${singerBean.id}">[[${singerBean.name}]]</option>
								</div>
							</select>
						</div>

						<div class="form-group" style="margin-bottom: 40px">
							<label for="music_ids">歌名</label>
							<select name="music_ids" class="selectpicker form-control" id="music_ids" title="请选择"  multiple data-actions-box="true" data-size="5" data-live-search =“true” required>
							</select>
						</div>

						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="submit" class="btn btn-primary">
								提交
							</button>
						</div>
					</form>
				</div>

		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<!-- plugins:js -->
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page-->
<script src="/node_modules/chart.js/dist/Chart.min.js"></script>
<!-- End plugin js for this page-->
<!-- inject:js -->
<script src="/js/off-canvas.js"></script>
<script src="/js/misc.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="/js/dashboard.js"></script>
<!-- End custom js for this page-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
    dialog. bootstrap 4.x is supported. You can also use the bootstrap js 3.3.x versions. -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<!-- the main fileinput plugin file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/fileinput.min.js"></script>
<!-- optionally if you need a theme like font awesome theme you can include it as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/themes/fa/theme.js"></script>
<!-- optionally if you need translation for your language then include  locale file as mentioned below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.9/js/locales/(lang).js"></script>

<script src="/js/bootstrap-select.min.js"></script>

<script src="/js/song_list_singer-Valid.js"></script>

<script th:inline="javascript">
	// $("#singer_id").selectpicker('deselectAll');
	function selectSong() {
		var singer = $("#singer_id").val();
		//获取地址栏中的值
		var song_list_id = [[${param.song_list_id}]];
		console.log(song_list_id[0]);
		$("#music_ids").selectpicker('deselectAll');
		$("#music_ids").find("option").remove();
		$.ajax({
			url: '/admin/SelectSong',
			async : false,
			cache : false,
			data : {
				"singer_id" : singer,
				"song_list_id" : song_list_id[0]
			},
			success : function(data) {
				if (!data.flag) {
					$.each(data, function (i, n) {
						$("#music_ids").append(" <option value=\"" + n.id + "\">" + n.song_title + "</option>");
					})
					$("#music_ids").selectpicker('refresh');
				}
			}

		});
	}
</script>

</body>

</html>
